<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<!-- #endif -->
		<!-- 导航 -->
		<view class="wx-nav">
			<image class="png-style left" src="@/static/icon/search.png" @click="search"></image>
			<text>主页</text>
			<!-- <image class="png-style right" src="@/static/icon/message.png"></image> -->
		</view>
		<!-- 滚动条 -->
		<scroll-view scroll-x="true" class="scroll-content" @scrolltolower="loadMore(index)">
			<view
				class="scroll-item"
				v-for="(item,index) in topBar"
				:key="index"
				@tap='changeTab(index,item.id)'
			>
				<text :class='topBarIndex===index ? "f-active-color" : "none"' >{{item.name}}</text>
			</view>
		</scroll-view>
		<template v-if="topBarIndex===0"> 		<!-- 主页个性化数据 -->
			<!-- 轮播图 -->
			<IndexSwiper ></IndexSwiper>
			<!-- 商家推荐 -->
			<Recommend ></Recommend>
			<!-- 热销商品 -->
			<Card carName="最新上架"></Card>
		</template>
		<!-- 商品列表 -->
		<CommodityList :dityList="goodData"></CommodityList>
		<!-- <view class="load-text">上拉加载更多...</view> -->
		<!-- 猜你喜欢 -->
		<Card carName="猜你喜欢"></Card>
		<CommodityList :dityList="otherData"></CommodityList>
		<Card carName="加载中..."></Card>
	</view>
</template>

<script>
	// 导入组件 可在template中使用 先放入components
	import Recommend from '@/components/index/Recommend.vue'
	import IndexSwiper from '@/components/index/indexSwiper.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import $http from '@/common/api/request.js'
	import user from '@/common/api/user/user.js'
	import indexH from '@/common/api/index/index.js'
	import shop from '@/common/api/shop/shop.js'
	import shopTemp from '@/common/shoptemp.js'
	export default {
		data() {
			return {
				//默认选中索引
				topBarIndex:0,
				topBar:[
					{name:'推荐'},
					{name:'运动'},
					{name:'户外'},
					{name:'食品'}
					],
				goodData:[],
				otherData:[],
				shopIds:[],
			}
		},
		components:{
			IndexSwiper,
			Recommend,
			Card,
			CommodityList
		},
		onLoad() {
		},
		mounted() {
			//登录
			user.login({name:'yunduo',password:'yunduo',isRemember:false})
				.then((res)=>{
					$http.setToken(res.data.access_token);
					this.loadBanner();
				//登录后获取用户信息
				user.info()
					.then(res=>{
						shopTemp.setUser(res.data);
					})
			})
			shop.getNewGood()
				.then((res)=>{
					this.goodData = res.data.list;
				})
		},
		//触底方法
		onReachBottom() {
			indexH.getRandGoodData()
				.then((res)=>{
					var temp = res.data.list;
					for(var i = 0; i< temp.length; i++){
						this.otherData.push(temp[i]);
					}
				})
		},
		methods: {
			//加载头部列表
			loadBanner(){
				uni.showLoading({
					title:'加载中',
				})
				indexH.getTitleList()
					.then((res)=>{
						this.topBar = res.data.index_bar_list;
					})
				uni.hideLoading();
			},
			//更换页面切换数据
			changeTab(index,id){
				if(this.topBarIndex === index){
					return;
				}
				if(id=="index_push"){
					shop.getNewGood()
						.then((res)=>{
							this.goodData = res.data.list;
						})
				}else{
					indexH.getData(id)
						.then((res)=>{
							this.goodData = res.data.list;
						})
				}
				this.topBarIndex = index
			},
			loadMore(index){
				console.log(index);
			},
			search(){
				//新页面入栈跳转
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		}
	}
</script>

<style scoped>
@import url("@/common/common.css");
@import url("@/common/uni.css");
.wx-nav{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 200rpx;
	width: 100%;
}
.png-style{
	width: 44rpx;
	height: 44rpx;
}
.right{
		position: absolute;
		padding-left: 80%;
}
.left{
		position: absolute;
		padding-right: 80%;
}
.scroll-content{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 38rpx;
}
.f-active-color{
	padding: 10rpx 0;
	color: #c02c38;
	border-bottom: 6rpx solid #c02c38;
}
.load-text{
	width: 100%;
	border-top: 2px solid #c02c38;
	line-height: 60rpx;
	text-align: center;
	color: #66ccff;
}
</style>
